<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <!-- 工具区域  -->
        <el-row type="flex" justify="space-between">
          <div>
            <el-button
              type="primary"
              size="small"
              @click="$refs.addFrom.isShow = true"
            >添加角色</el-button>
          </div>
          <div>22</div>
        </el-row>
        <br>
        <!-- 表单区域  -->
        <el-table :data="list" border stripe>
          <el-table-column label="角色">
            <template slot-scope="{ row }">
              <el-input
                v-if="row.isEdit"
                v-model="row.editDate.name"
                type="text"
                size="small"
              />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="启用">
            <template slot-scope="{ row }">
              <el-switch
                v-if="row.isEdit"
                v-model="row.editDate.state"
                :active-value="1"
                :inactive-value="0"
              />
              <span v-else>{{ row.state * 1 === 1 ? "启用" : "禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述">
            <template slot-scope="{ row }">
              <el-input
                v-if="row.isEdit"
                v-model="row.editDate.description"
                type="textarea"
                size="small"
              />
              <span v-else>{{ row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          ><template slot-scope="{ row }">
            <template v-if="row.isEdit">
              <el-button
                type="primary"
                size="small"
                @click="editSubmit(row.editDate)"
              >确定</el-button>
              <el-button
                plain
                size="small"
                @click="row.isEdit = false"
              >取消</el-button>
            </template>
            <template v-else>
              <el-button type="text">分配权限</el-button>
              <el-button
                style="margin-right: 10px"
                type="text"
                @click="row.isEdit = true"
              >编辑</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="delRow(row.id)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
          </el-table-column></el-table>
        <!-- 分页区域 -->
        <el-pagination
          :current-page.sync="queryData.page"
          layout="prev, pager, next"
          :page-size="queryData.pagesize"
          :total="total"
          @current-change="currentChange"
        />
      </el-card>
    </div>
    <addFrom ref="addFrom" @updateList="initListData" />
  </div>
</template>
<script>
import { delSoleInfoApi, editSoleApi, getSoleListApi } from '@/api/role'
import addFrom from '@/views/role/components/addFrom.vue'
export default {
  name: 'Role',
  components: { addFrom },
  data() {
    return {
      list: [],
      queryData: {
        page: 1,
        pagesize: 4
      },
      total: 0
    }
  },
  created() {
    this.initListData()
  },
  methods: {
    // 获取校色列表数据
    async initListData() {
      let { rows, total } = await getSoleListApi(this.queryData)
      rows = rows.map((item) => {
        item.editDate = { ...item }
        item.isEdit = false
        return item
      })
      this.list = rows
      this.total = total
    },
    // 页码根本更换事件
    currentChange(val) {
      this.queryData.page = val
      this.initListData()
    },
    async editSubmit(val) {
      if (!val.name || !val.description) {
        return this.$message.warning('请输入完整内容')
      }
      const arr = val.id + ''
      console.log(typeof arr)
      console.log(arr)
      await editSoleApi(val, arr)
      this.$message.success('操作成功')
      this.initListData()
    },
    // 删除功能
    async delRow(id) {
      await delSoleInfoApi(id)
      this.$message.success('删除成功')
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page
      }
      this.initListData()
    }
  }
}
</script>
